<template>
    <div class="start">
        <h2>子组件</h2>
        <button @click="chaunfu">传父</button>
        <button @click="chaunfutoy">传父toy</button>
        <button @click="mitttoy">传子组件2toy</button>
        <button @click="parentRef($parent)">parentRef</button>
        <h4>自己的玩具-----》〉{{ toy }}</h4>
        <h4>父传过来的死值-----{{ a }}</h4>
        <h4>父传过来的响应值-----{{ b }}</h4>
        <input type="text" :value="modelValue" @input="change1">
    </div>
</template>

<script lang='ts' setup>
import emitter from '@/utils/emitter';
import { ref, watch } from 'vue'
import { defineEmits } from 'vue';

let emit = defineEmits(['sendToy', "update:modelValue"])
let childData = ref(3)
let toy = ref("佩奇")
let props = defineProps(["a", "b", "fun", "modelValue", "parentData"])

// watch(props.parentData, (value, old) => {
//     console.log(value, old,);
// },)

function chaunfu() {
    childData.value += 2
    props.fun(childData.value)
}
const chaunfutoy = () => {
    toy.value += "~"
    emit("sendToy", toy.value)
}
const mitttoy = () => {
    toy.value += "~"
    emitter.emit("gettoy", toy.value)

}
const change1 = (e: any) => {
    emit("update:modelValue", e.target.value)
}
const parentRef = ($parent: any) => {
    console.log($parent.che);
    $parent.che += "!!"

}
defineExpose({ toy })
</script>
<style scoped>
.start {
    width: 500px;
    height: 200px;
    background: rgb(127, 146, 168);
}
</style>